import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select, Upload, Space } from 'antd';
import { CopyOutlined, DownloadOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';
import type { UploadProps } from 'antd';

const { Title, Text } = Typography;
const { TextArea } = Input;
const { Option } = Select;

export default function ProductPresentation() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [fileList, setFileList] = useState<any[]>([]);
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const productNameRef = useRef<HTMLDivElement>(null);
  const productTypeRef = useRef<HTMLDivElement>(null);
  const targetAudienceRef = useRef<HTMLDivElement>(null);
  const styleRef = useRef<HTMLDivElement>(null);
  const mainFeaturesRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'productName',
      title: '输入产品名称',
      description: '请输入您要介绍的产品名称，这将用于生成个性化的产品介绍',
    },
    {
      key: 'productType',
      title: '选择产品类型',
      description: '选择产品所属的类别，如手机/数码产品、服装/鞋包等',
    },
    {
      key: 'targetAudience',
      title: '选择目标客群',
      description: '选择产品的主要销售对象，如年轻人、职场人士等',
    },
    {
      key: 'style',
      title: '选择文案风格',
      description: '选择您希望的产品介绍风格，如专业详细、亲切活泼等',
    },
    {
      key: 'mainFeatures',
      title: '填写主要功能/特点（可选）',
      description: '输入产品的主要功能或特点，每行一个，使介绍更加具体',
    },
    {
      key: 'generateButton',
      title: '生成产品介绍',
      description: '完成所有设置后，点击此按钮生成专业的产品介绍文案',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的产品介绍',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    productName: productNameRef,
    productType: productTypeRef,
    targetAudience: targetAudienceRef,
    style: styleRef,
    mainFeatures: mainFeaturesRef,
    generateButton: generateButtonRef,
    result: resultRef,
  };

  // 上传配置
  const uploadProps: UploadProps = {
    name: 'file',
    multiple: false,
    fileList,
    beforeUpload: (file) => {
      // 这里只是模拟上传，实际应用中应该调用上传接口
      setFileList([{ ...file, status: 'done' }]);
      return false;
    },
    onChange: ({ fileList: newFileList }) => setFileList(newFileList),
    onDrop: (e) => {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  // 生成产品介绍的模拟函数
  const generateContent = (
    productName: string,
    productType: string,
    mainFeatures: string,
    targetAudience: string,
    sellingPoints: string,
    style: string
  ): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = '';

    // 产品介绍标题
    result += `✨ ${productName} | ${productType}\n\n`;

    // 产品亮点
    result += `【产品亮点】\n`;
    if (style === '专业详细') {
      result += `${productName}是一款精心设计的${productType}，融合了先进技术和优质材料，为您带来卓越的使用体验。\n`;
    } else if (style === '亲切活泼') {
      result += `你好呀！今天要给大家介绍的是我们的明星产品——${productName}！这款${productType}真的超好用，我已经亲测了！\n`;
    } else if (style === '高端奢华') {
      result += `${productName}——${productType}中的精品之作，为追求品质生活的您量身定制，彰显您的独特品味。\n`;
    }

    // 主要功能/特点
    result += `\n【主要功能/特点】\n`;
    if (mainFeatures) {
      const features = mainFeatures.split('\n').filter(f => f.trim());
      features.forEach((feature, index) => {
        result += `💡 ${index + 1}. ${feature}\n`;
      });
    } else {
      // 根据产品类型生成默认特点
      if (productType.includes('手机') || productType.includes('数码')) {
        result += `💡 1. 强大的性能配置，运行流畅不卡顿\n`;
        result += `💡 2. 高清摄像系统，记录精彩瞬间\n`;
        result += `💡 3. 长效续航，全天使用无忧\n`;
        result += `💡 4. 精美外观设计，彰显个性\n`;
      } else if (productType.includes('服装') || productType.includes('鞋包')) {
        result += `💡 1. 优质面料，舒适透气\n`;
        result += `💡 2. 时尚设计，潮流百搭\n`;
        result += `💡 3. 精细做工，品质保证\n`;
        result += `💡 4. 多色可选，满足不同需求\n`;
      } else if (productType.includes('美妆') || productType.includes('护肤')) {
        result += `💡 1. 天然成分，温和不刺激\n`;
        result += `💡 2. 显著效果，见证改变\n`;
        result += `💡 3. 科学配方，安全可靠\n`;
        result += `💡 4. 精美包装，送礼自用两相宜\n`;
      } else {
        result += `💡 1. 高品质材料，耐用持久\n`;
        result += `💡 2. 人性化设计，使用便捷\n`;
        result += `💡 3. 多种功能，满足不同需求\n`;
        result += `💡 4. 性价比高，值得拥有\n`;
      }
    }

    // 产品优势/卖点
    result += `\n【产品优势/卖点】\n`;
    if (sellingPoints) {
      const points = sellingPoints.split('\n').filter(p => p.trim());
      points.forEach((point, index) => {
        result += `🔥 ${index + 1}. ${point}\n`;
      });
    } else {
      result += `🔥 1. 同类产品中的佼佼者，市场口碑良好\n`;
      result += `🔥 2. 相比竞品，具有更高的性价比\n`;
      result += `🔥 3. 创新设计，解决用户痛点\n`;
      result += `🔥 4. 完善的售后服务，购物无忧\n`;
    }

    // 适用人群
    result += `\n【适用人群】\n`;
    if (targetAudience === '年轻人') {
      result += `👱‍♀️ 适合追求时尚、注重个性的年轻消费者\n`;
    } else if (targetAudience === '职场人士') {
      result += `💼 适合注重品质、效率的职场人士\n`;
    } else if (targetAudience === '家庭用户') {
      result += `👨‍👩‍👧‍👦 适合注重实用性和安全性的家庭用户\n`;
    } else if (targetAudience === '送礼佳选') {
      result += `🎁 适合作为礼物送给亲朋好友\n`;
    }

    // 使用场景
    result += `\n【使用场景】\n`;
    if (productType.includes('手机') || productType.includes('数码')) {
      result += `📱 日常通讯、工作办公、娱乐休闲\n`;
    } else if (productType.includes('服装') || productType.includes('鞋包')) {
      result += `👗 日常穿搭、职场通勤、约会聚会\n`;
    } else if (productType.includes('美妆') || productType.includes('护肤')) {
      result += `💄 日常妆容、特殊场合、护肤保养\n`;
    } else {
      result += `🏠 家居使用、办公场所、户外出行\n`;
    }

    // 规格参数
    result += `\n【规格参数】\n`;
    result += `📏 尺寸：根据实际产品而定\n`;
    result += `⚖️ 重量：根据实际产品而定\n`;
    result += `🎨 颜色：多色可选\n`;
    result += `📦 包装清单：产品本体、说明书、保修卡等\n`;

    // 购买指南
    result += `\n【购买指南】\n`;
    result += `✅ 点击下方链接即可购买\n`;
    result += `✅ 现在购买享受XX优惠\n`;
    result += `✅ 支持7天无理由退换货\n`;
    result += `✅ 全国联保，品质保障\n`;

    // 结语
    result += `\n【结语】\n`;
    if (style === '专业详细') {
      result += `${productName}是一款集性能、外观、体验于一体的优秀产品，值得您拥有。\n`;
    } else if (style === '亲切活泼') {
      result += `总之，这款产品真的太赞了！我相信你用了之后也会像我一样爱上它的！\n`;
    } else if (style === '高端奢华') {
      result += `${productName}，为您的生活增添品质与格调。\n`;
    }

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { productName, productType, mainFeatures, targetAudience, sellingPoints, style } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(productName, productType, mainFeatures, targetAudience, sellingPoints, style);
      setGeneratedContent(generated);
      message.success('产品介绍生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '产品介绍.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 产品类型选项
  const productTypeOptions = [
    { label: '手机/数码产品', value: '手机/数码产品' },
    { label: '服装/鞋包', value: '服装/鞋包' },
    { label: '美妆/护肤产品', value: '美妆/护肤产品' },
    { label: '家居用品', value: '家居用品' },
    { label: '食品饮料', value: '食品饮料' },
    { label: '母婴用品', value: '母婴用品' },
    { label: '图书文具', value: '图书文具' },
    { label: '运动户外', value: '运动户外' },
    { label: '其他', value: '其他' },
  ];

  // 目标客群选项
  const audienceOptions = [
    { label: '年轻人', value: '年轻人' },
    { label: '职场人士', value: '职场人士' },
    { label: '家庭用户', value: '家庭用户' },
    { label: '送礼佳选', value: '送礼佳选' },
  ];

  // 风格选项
  const styleOptions = [
    { label: '专业详细', value: '专业详细' },
    { label: '亲切活泼', value: '亲切活泼' },
    { label: '高端奢华', value: '高端奢华' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Title level={2} style={{ display: 'flex', alignItems: 'center' }}>
          产品介绍生成
          <TourGuideButton onClick={showTour} />
        </Title>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              productType: '手机/数码产品',
              targetAudience: '年轻人',
              style: '专业详细',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productName"
                  label="产品名称"
                  rules={[{ required: true, message: '请输入产品名称' }]}
                >
                  <div ref={productNameRef}>
                    <Input placeholder="请输入产品名称" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productType"
                  label="产品类型"
                  rules={[{ required: true, message: '请选择产品类型' }]}
                >
                  <div ref={productTypeRef}>
                    <Select placeholder="请选择产品类型" options={productTypeOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="targetAudience"
                  label="目标客群"
                  rules={[{ required: true, message: '请选择目标客群' }]}
                >
                  <div ref={targetAudienceRef}>
                    <Select placeholder="请选择目标客群" options={audienceOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="style"
                  label="文案风格"
                  rules={[{ required: true, message: '请选择文案风格' }]}
                >
                  <div ref={styleRef}>
                    <Select placeholder="请选择文案风格" options={styleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="mainFeatures"
                  label="主要功能/特点（可选）"
                >
                  <div ref={mainFeaturesRef}>
                    <TextArea rows={3} placeholder="请输入产品的主要功能或特点，每行一个，如不填写将根据产品类型自动生成" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="sellingPoints"
                  label="产品卖点（可选）"
                >
                  <TextArea rows={3} placeholder="请输入产品的核心卖点，每行一个，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item label="上传产品图片（可选）">
                  <Upload.Dragger {...uploadProps}>
                    <p className="ant-upload-drag-icon">
                      <UploadOutlined />
                    </p>
                    <p className="ant-upload-text">点击或拖拽文件到此处上传</p>
                    <p className="ant-upload-hint">
                      支持单个图片上传，仅用于预览，不会实际上传到服务器
                    </p>
                  </Upload.Dragger>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={generateButtonRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成产品介绍'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        steps={tourSteps}
        targetRefs={tourRefs}
        onClose={() => setTourVisible(false)}
      />
    </>
  );
}